<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>IP查询 - 在线工具 - OKTools</title>
    <meta name="keywords" content="IP查询">
    <meta name="description" content="IP查询">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="./static/css/style.css" type="text/css">
</head>
<body>
{{template "aside"}}
<main>
    <div class="container">
        <h1>IP查询</h1>
        <div class="group mt-2">

            <input id="input_ip" class="input" placeholder="">
            <button class="button primary" onclick="fetchIpInfo()">查询</button>
        </div>
        <div class="tile mt-2">
            <ul>
                <li id="ip-info"></li>
            </ul>
        </div>
    </div>
</main>
<script>


    async function fetchIpInfo(){
        const ip = document.getElementById('input_ip').value;
        const clientIPInfo = await fetch('./api/ip?ip='+ip)
            .then((response) => response.json());
        document.getElementById('ip-info').innerText = clientIPInfo.region;
    }

    async function fetchClientIp(){
        const clientIPInfo = await fetch('./api/client-ip')
            .then((response) => response.json());

        document.getElementById('input_ip').value = clientIPInfo.ip;
        document.getElementById('ip-info').innerText = clientIPInfo.region;
    }

    fetchClientIp();
</script>
</body>
</html>